<template>
	<div class="xjeyegzhbox">
		<div class="xjeyegzhtitle"><span>关注公众号</span></div>
		<div class="xjeyegzhcontent">
			<div class="xjselectlink ml-10">
				<div class="xjeyegzh">微信公众号：<input v-model="eyegzh.text" style="width: 175px;" />
					<el-button class="xjbutton" @click="setlink" size="mini">设置链接</el-button>
				</div>
				<el-link type="primary" :href="eyegzh.url" class="mb-10"><span style="color:black;font-size: 12px;" v-if="eyegzh.url">链接：</span>{{eyegzh.url}}</el-link>
			</div>
		</div>
		<el-dialog title="设置超链接" :visible.sync="dialogVisible" width="35%" :modal='false' style="margin-left: 20%;">
			<input ref="imglink" class="xjinput" :value="eyegzh.url" /><el-button type="primary" @click="setimglink">确定</el-button>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">关闭</el-button>
				<!-- <el-button type="primary" @click="dialogVisible = false">确 定</el-button> -->
			</span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		props: ["eyegzh"],
		data() {
			return {
				dialogVisible:false
			}
		},
		methods: {
			setlink(){
				this.dialogVisible=true;
			},
			setimglink(){
				this.$parent.nowitem.eyegzhtext.url= this.$refs.imglink.value;
				this.dialogVisible=false;
			}
		},
		created() {}
	}
</script>

<style lang="scss">
	//@import "@/assets/css/common.scss";
	.xjeyegzhbox {
		width: 400px;
		display: flex;
		flex-direction: column;
        .xjinput{
			border:1px solid $shenlan;
			width: 400px;
			height: 30px;
			margin-right: 10px;
		}
		.xjeyegzhtitle {
			width: 100%;
			background-color: $danlv;
			border: 1px solid $qianlv;

			span {
				margin-left: 10px;
				font-size: 12px;
				line-height: 30px;
				color: $shenlv;
			}
		}

		.xjeyegzhcontent {
			width: 100%;
			// height: 100%;
			background-color: white;
			border: 1px solid $qianlv;

			.xjselectlink {
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				justify-content: center;

				.xjeyegzh {
					width: 350px;
					line-height: 50px;
					font-size: 12px;

					input {
						height: 25px;
						width: 150px;
						border: 1px solid #ccc;
					}
				}
			}

			.van-uploader__wrapper {
				flex-direction: column;
			}

			.xjbutton {
				background-color: $shenlv;
				color: white;
				margin: 0px 10px 12px;
				display: inline-block;
			}

			p {
				font-size: 12px;
				margin-left: 15px;
			}
		}

	}
</style>
